<template>
  <div class="container">
    <div class="register-body">
      <div class="register-title">用户注册</div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            v-model="ruleForm.pass"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            v-model="ruleForm.checkPass"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="ruleForm.realname" />
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
          <el-input v-model.number="ruleForm.tel" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()"
            >提交</el-button
          >
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          <el-button @click="goback()">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  
  <script setup>
import axios from "axios";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus';
const router = useRouter();

const ruleFormRef = ref();

const validatePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (ruleForm.checkPass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请继续输入密码"));
  } else if (value !== ruleForm.pass) {
    callback(new Error("两次密码不一致"));

  } else {
    callback();
  }
};

const ruleForm = reactive({
  username: "",
  pass: "",
  checkPass: "",
  realname: "",
  tel: ""
});

const rules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],//trigger: "blur" 表示在输入框失去焦点时触发验证
  pass: [{ validator: validatePass, trigger: "blur" }],
  checkPass: [{ validator: validatePass2, trigger: "blur" }],
  realname: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
  tel: [{ required: true, message: "请输入手机号", trigger: "blur" }],
});

const submitForm = () => {

  const user = {
    "username": ruleForm.username,
    "password": ruleForm.pass,
    "name": ruleForm.realname,
    "phonenum": ruleForm.tel
  };
  if (ruleForm.pass !== ruleForm.checkPass) {
    ElMessage.error('注册失败！两次输入的密码不一致');
    return;
  }else{
    axios.post('/api/register',user)
.then((res =>{
  console.log(res.data);
  if (res.data.code == 1) {
      ElMessage.success('注册成功');
    } else {
      ElMessage.error('注册失败');
    }
  })
 );}
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
const goback = () => {
  router.push("/login");
};




</script>
  <style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;

  .register-body {
    position: absolute;
    background-color: rgba($color: white, $alpha: 0.7);
    width: 400px;
    height: 500px;
    border-radius: 8px;
    box-shadow: 2px 2px 10px #ddd;
    .demo-ruleForm {
      margin-right: 30px;
    }
    .register-title {
      padding-top: 10px;
      font-size: 20px;
      text-align: center;
      margin-bottom: 10px;
    }
  }
}
</style>